
<style>
.userInfo{
  overflow: hidden;
}
.userInfo .baseInfo{
  width: 300px;
  float: left;
}
.userInfo .baseInfo table{
  padding: 5px 5px;
}
.userInfo .baseInfo table tr{
  line-height: 30px;
  color: #575656;
}
.userInfo .baseInfo table th{
  text-align: left;
  width: 100px;
}
.userInfo .baseInfo table td{
  border: none;
  margin-right: 30px;
  text-align: left;
}
.userInfo .image{
  border-radius: 50%;
  margin-top: 20px;
  width: 200px;
  height: 200px;
  float: left;
  overflow: hidden;
}
.userInfo .image>img{
  width: 200px;
  height: 200px;
}
.dialog{
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 18px;
}
.dialog-content{
  margin: 100px auto;
  width: 30%;
  /* height: 400px; */
  background-color: white;
  border-radius: 10px;
  padding-bottom: 10px;

}
.dialog-header{
  /* line-height: 40px; */
  background-color: #2cb5ac;
  color: white;
  font-size: 20px;
  padding: 10px 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-bottom: 20px;
  overflow: hidden;
}
.dialog-header .dialog-title{
  float: left;
}
.dialog-header .dialog-cancel{
  float: right;
}
.dialog-body{
  line-height: 40px;
}
.dialog-body .form-item{
  margin-bottom: 10px;
}
.dialog-body label{
  width: 80px;
  text-align: right;
  margin-right: 10px;
  display: inline-block;
}
.dialog-body input{
  width: calc(100% - 170px);
  height: 30px;
  font-size: 18px;
  border-radius: 5px;
}
.dialog-body .radio_type{
    width: 15px;
    height: 15px;
}
.dialog-body .radio_type:checked{
  background: #2cb5ac;
}
.dialog-footer{
  text-align: right;
  /* margin-bottom: 20px; */
  padding-right: 10px;
}
</style>





<div class="userInfo">
  <div class="baseInfo">
    <table>
      <tbody>
        <tr><th>用户名</th><td>用户名</td></tr>
        <tr><th>姓名</th><td>姓名</td></tr>
        <tr><th>手机号</th><td>手机号</td></tr>
        <tr><th>性别</th><td>性别</td></tr>
        <tr><th>注册时间</th> <td>注册时间</td></tr>
        <tr><th>状态</th><td>状态</td></tr>
      </tbody>
    </table>
    <button class="btn btn-success" id="toEdit">修改</button>
  </div>
  <div class="image">
    <img src="./images/user.jpg" alt="">
  </div>
   <!-- 模态框 -->
   <div class="dialog">
    <div class="dialog-content">
      <div class="dialog-header">
        <div class="dialog-title">
          修改个人信息
        </div>
        <div class="dialog-cancel"><i class="fa fa-times"></i></div>
      </div>
      <div class="dialog-body">
        <div class="form-item">
          <label for="">用户名</label>
          <input type="text" name="username">
        </div>
        <div class="form-item">
          <label for="">密码</label>
          <input type="password" name="password">
        </div>
        <div class="form-item">
          <label for="">姓名</label>
          <input type="text" name="realname" required>
        </div>
        <div class="form-item">
          <label for="">手机号</label>
          <input type="text" name="telephone">
        </div>
        <div class="form-item">
          <label for="">性别</label>
          <label><input type="radio" value="male" name="gender" class="radio_type" id="male">男</label>
          <label><input type="radio" value="female" name="gender" class="radio_type" id="female">女</label>
        </div>
      </div>
      <div class="dialog-footer">
        <button class="btn btn-error">取消</button>
        <button class="btn btn-success">确定</button>
      </div>
    </div>
  </div>
</div>



<script>
  

  //关闭模态框
  $('.fa-times').click(()=>{
    $('.dialog').fadeOut()
  })
  $('.dialog-footer button:first').click(()=>{
    $('.fa-times').trigger('click')
  })


   var userInfoDataModel={
    //所有的类别数据
    userInfoData:[],
    //当前要修改的对象
  };
  // 封装——处理模态款标题，追加option 设置表单空间内容 显示模态框
  function changeDialog(){
    //面向数据开发
    $('[name=username]').val(userInfoDataModel.userInfoData.username);
    $('[name=password]').val(userInfoDataModel.userInfoData.password);
    $('[name=realname]').val(userInfoDataModel.userInfoData.realname);
    $('[name=telephone]').val(userInfoDataModel.userInfoData.telephone);
    $('[name=gender]').val(userInfoDataModel.userInfoData.gender=='male'?$('#male').prop("checked", "checked"):$('#female').prop("checked", "checked"));
    //显示模态款
    $('.dialog').fadeIn()
  }

  //携带token请求用户信息
  var token=sessionStorage.getItem('token')
  findUserInfo();
  function findUserInfo(){
    myAjax.get(api.USER_INFO,{token}).then((res)=>{
    //清空节点
    userInfoDataModel.userInfoData=res.data
    $(".userInfo tbody").empty();
    console.log(res)
    let result=res.data;
        $(".userInfo tbody").append($(`
        <tr><th>用户名</th><td>${result.username}</td></tr>
        <tr><th>姓名</th><td>${result.realname}</td></tr>
        <tr><th>手机号</th><td>${result.telephone}</td></tr>
        <tr><th>性别</th><td>${result.gender}</td></tr>
        <tr><th>注册时间</th><td>${result.registerTime}</td></tr>
        <tr><th>状态</th><td>${result.status}</td></tr>`))
     
  })
//es6模板字符串 `回车${name}`
}

  //给修改添加模态款
  $("#toEdit").click(()=>{
    //标题 内容 option 显示模态框
    changeDialog();
    console.log(userInfoDataModel.userInfoData)
  })
</script>